<script setup lang="ts">
const open = () => {
  uni.navigateTo({
    url: '/pages/message/attention/attention'
  })
}
</script>

<template>
  <view class="notify-cards">
    <view class="notify-content">
      <view class="icon">
        🔔
      </view>
      <view class="text">
        <text class="text-tip">收到以下消息时通知我</text>
        <view>消息回复 | 接单通知 </view>
      </view>
      <view class="notify-btn" @click="open">开启消息通知</view>
    </view>
  </view>

</template>

<style scoped lang="scss">
/* 卡片容器 */
.notify-cards {
  width: calc(100vw - 20px);
  margin-left: 10px;
  margin-top: 10px;
  background: linear-gradient(90deg, #fdf7f5, #eaf9fa);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px 20px 16px 10px;
  position: relative;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 内容布局 */
  .notify-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* 左侧铃铛图标 */
  .icon {
    font-size: 22px;
    color: #00c1de;
    flex-shrink: 0;
  }

  /* 文本部分 */
  .text {
    flex: 1;
  }

  .text h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
    margin-bottom: 4px;
  }

  .text p {
    font-size: 14px;
    color: #666;
    margin: 0;
  }

  .text-tip {
    font-size: 16px;
    font-weight: bold;
    color: rgba(0,0,0,0.9);
    margin-bottom: 4px;
  }

  /* 右侧按钮 */
  .notify-btn {
    background-color: #3ed2cc;
    border: none;
    color: white;
    font-size: 14px;
    padding: 8rpx 14rpx;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s;
    margin-top: 5px;
  }

  .notify-btn:hover {
    background-color: #00c1de;
  }

  /* 右上角关闭按钮 */
  .close-btn {
    position: absolute;
    top: 8rpx;
    right: 15rpx;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
  }

  .close-btn:hover {
    color: #666;
  }
}



</style>